<!--
 * @Author: xiaotiwen
 * @Date: 2020-05-14 14:18:28
 * @LastEditTime: 2020-07-29 17:02:00
 * @LastEditors: xiaotiwen
 * @FilePath: \eduweb\src\views\practiceManagement\fundingManagement\fundingManagementApply.vue
 * @Description:  经费管理申请
 -->

<template>
    <div>
        <div class="funding">
            <h2>{{$t('fundingManagement.title.pageTitle')}}</h2>
            <wordTable :data="data" :label="label" :left-style="leftStyle" />
            <div class="funding_border" />
            <div class="funding_borderForm">
                <el-form ref="form" :model="form" :rules="rules" label-width="130px">
                    <el-row class="funding_row">
                        <el-col :span="8" class="funding_col">
                            <div class="funding_col_div1 funding_bg"><span>{{$t('fundingManagement.label.project')}}</span></div>
                            <div class="funding_col_div funding_bg">{{$t('fundingManagement.label.money')}}</div>
                        </el-col>
                        <el-col :span="16" class="funding_col">
                            <div class="funding_col_div funding_bg">{{$t('fundingManagement.label.cal')}}</div>
                        </el-col>
                    </el-row>
                    <el-row v-for="(item, idx) in form.udgPtClassFundsInfoDetailTs" :key="idx" class="funding_row funding_tables">
                        <el-col :span="8" class="funding_col">
                            <div class="funding_col_div1 funding_bg">
                                <span>{{ item.itemName }}：</span>
                            </div>
                            <div class="funding_col_div">
                                <el-form-item :prop="`item.${idx}.itemValue`" label-width="0" class="funding_item" :rules="rules.itemValue">
                                    <el-input-number v-model="item.itemValue" :controls="false" :min="0" :max="999999999" :precision="2" :placeholder="$t('fundingManagement.tips.plzInput')" @change="blurChange" style="width:100%"/>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="16" class="funding_col">
                            <div class="funding_col_div">
                                <el-label-item label-width="0" class="funding_item">
                                    <el-input v-model="item.itemDesc" maxlength="100" :placeholder="$t('fundingManagement.tips.plzInput')" />
                                </el-label-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="funding_row">
                        <el-col :span="8" class="funding_col">
                            <div class="funding_col_div1 funding_bg"><span>{{$t('fundingManagement.label.totalCount')}}</span></div>
                            <div class="funding_col_he">
                                <span class="funding_col_span">{{ form.totalFee }}</span>
                            </div>
                        </el-col>
                        <el-col :span="16" class="funding_col">
                            <el-col :span="6" class="funding_col">
                                <div class="funding_bg funding_col_money">
                                    <span>{{$t('fundingManagement.label.actual')}}</span>
                                </div>
                            </el-col>
                            <el-col :span="18">
                                <div class="funding_col_div">
                                    <el-label-item label-width="0" class="funding_item">
                                        <el-input v-model="form.writeFee" :disabled="true" />
                                    </el-label-item>
                                </div>
                            </el-col>
                        </el-col>
                    </el-row>
                    <el-row class="funding_row">
                        <el-col :span="12" class="funding_col">
                            <div class="funding_btleft">
                                <el-row>
                                    <el-form-item :label="$t('fundingManagement.label.remark')">
                                        <el-input v-model="form.remark" type="textarea" :placeholder="$t('fundingManagement.tips.plzInput')" maxlength="200" rows="6" resize="none" />
                                    </el-form-item>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item :label="$t('fundingManagement.label.personApply')" />
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item :label="$t('fundingManagement.label.date')" />
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                        <el-col :span="12" class="funding_col">
                            <div class="funding_btright">
                                <el-row>
                                    <el-form-item :label="$t('fundingManagement.label.seal')" label-width="220px" />
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item :label="$t('fundingManagement.label.principal')" />
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item :label="$t('fundingManagement.label.date')" />
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="funding_footer">
            <el-button type="primary" class="funding_submit" @click="saveSend('submit')">{{$t('message.submit')}}</el-button>
            <el-button type="primary" @click="saveSend('save')">{{$t('message.save')}}</el-button>
            <el-button @click="quit">{{$t('message.cancel')}}</el-button>
        </div>
    </div>
</template>

<script>
const reg = /^(([1-9][0-9]*)|([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})|0)$/;
var checkNumber = (rule, value, callback) => {
    if (value && !(reg.test(value) || value === '无')) {
        return callback(new Error())
    } else {
        return callback()
    }
}
import wordTable from '../common/wordTable'
import { getDetails, fundApplication, fundSubmit } from 'common/src/api/practiceManagement/fundingManagement'
import commonMixins from '../commonMixins'
export default {
    // 组件名称
    name: 'FundingManagementDetails',
    // 局部注册的组件
    components: {
        wordTable
    },
    mixins: [commonMixins],
    // 组件参数 接收来自父组件的数据
    props: {
        ids: {
            type: String,
            default: ''
        }
    },
    // 组件状态值
    data() {
        return {
            leftStyle: { width: '140px' },
            form: {
                yearTerm: '',
                totalFee: '',
                remark: '',
                id: '',
                classId: '',
                writeFee: '',
                workFlowId: '',
                udgPtClassFundDetailDto: '',
                udgPtCourseInfoT: '',
                udgPtClassFundsInfoDetailTs: []
            },
            practiceNature: [
                { label: this.$t('fundingManagement.label.concentrated'), value: 'CENTRALIZE' },
                { label: this.$t('fundingManagement.label.dispersion'), value: 'DISPERSE' }
            ],
            data: {},
            label: [
                [{ label: this.$t('fundingManagement.label.courseProgramNumber'), props: 'subCourseNo' }, { label: this.$t('fundingManagement.label.courseName'), props: 'courseName' }, { label: this.$t('fundingManagement.label.courseOpenAcademy'), props: 'courseOpenAcademy' }],
                [{ label: this.$t('fundingManagement.label.majorName'), props: 'majorName' }, { label: this.$t('fundingManagement.label.practiceCategorys'), props: 'practiceCategorys' }, { label: this.$t('fundingManagement.label.baseAreas'), props: 'baseAreas' }],
                [{ label: this.$t('fundingManagement.label.studentCount'), props: 'studentCount' }, { label: this.$t('fundingManagement.label.teacherCount'), props: 'teacherCount' }, { label: this.$t('fundingManagement.label.practiceDays'), props: 'practiceDays' }]
            ],
            options: {
                name: [],
                practiceCategory: [],
                compus: []
            },
            rules: {
                itemValue: [{ validator: checkNumber, trigger: 'blur' }]
            }
        }
    },
    // 计算属性
    computed: {
    },
    // 侦听器
    watch: {},
    /**
     * 在实例初始化之后，组件属性计算之前，如data属性等
     */
    created() { },
    /**
     * 在挂载开始之前被调用：相关的 render 函数首次被调用。
     */
    mounted() {
        this.getDetails();
        let jsons = {
            UDG_PRACTICE_CATEGORY: 'practiceCategory',
            X_XQ: 'compus'
        }
        this.initOptions(jsons);
    },
    // 组件方法
    methods: {
        getDetails() {  // 获取详情
            let jsonData = {
                classId: this.ids
            }
            let param = {
                UDG_FUND_CATEGORY: 'name'
            }
            this.initOptions(param).then(() => {
                this.options.name.sort(this.getSortFun('asc', 'value'));
                this.$nextTick(() => {
                    getDetails(jsonData).then(res => {
                        this.data = res.data.udgPtClassFundDetailDto;
                        if (parseInt(this.data.baseArea) === 410001) {
                            this.$set(this.data, 'baseAreas', this.fieldChange(this.options.compus, this.data.compus));
                        } else {
                            this.$set(this.data, 'baseAreas', this.data.courseAddr);
                        }
                        this.$set(this.data, 'practiceCategorys', this.fieldChange(this.options.practiceCategory, this.data.practiceCategory));
                        this.doneData(res.data)
                    })
                });
            })
        },
        handleInput(e){
            this.number = e.target.value.replace(/\D/g, '').replace(/^0{1,}/g, '');
        },
        blurChange(val) { // 合计
            if (!reg.test(val) && val) {
                this.$message({ message: this.$t('fundingManagement.tips.floatLimit'), type: 'warning' })
                return
            }
            let num = 0
            this.form.udgPtClassFundsInfoDetailTs.forEach(item => {
                if (parseFloat(item.itemValue)) {
                    num = (parseFloat(item.itemValue) * 1000000 + num * 1000000) / 1000000;
                }
            })
            this.form.totalFee = num;
            this.form.writeFee = this.convertCurrency(num);
        },
        saveSend(val) {  // 提交、保存
            let num = 0
            let flag = true
            let submitFlag = true;
            this.form.udgPtClassFundsInfoDetailTs.forEach(item => { // 校验数据
                if (item.itemValue) {
                  if (!reg.test(item.itemValue)) {
                    this.$message({ message: this.$t('fundingManagement.tips.floatLimit2'), type: 'warning' });
                    flag = false
                    return;
                  }
                  num = (parseFloat(item.itemValue) * 1000000 + num * 1000000) / 1000000;
                } else {
                  this.submitFlag = false;
                }
            });
            if (num <= 0) {
                flag = false;
                this.$message({ message: this.$t('fundingManagement.tips.moreThanZero'), type: 'warning' });
                return;
            }
            if (!flag) { // 校验是否通过
              return;
            }
            if (val === 'save') {
                // 保存
                fundApplication(this.form).then(res => {
                    if (res && res.code !== 200) {
                        this.$message({ message: res.msg, type: 'warning' })
                        return
                    }
                    this.$message({ message: this.$t('message.saveSuccess') ,type: 'warning' })
                    this.$emit('back:reload')
                    this.$emit('quit')
                })
            } else if (val === 'submit') { // 提交
                if (!submitFlag) {
                    this.$noSelectAlert(this.$t('fundingManagement.label.complete'))
                    return
                }
                fundSubmit(this.form).then(res => {
                    if (res && res.code !== 200) {
                        this.$message({ message: res.msg, type: 'warning' })
                        return
                    }
                    this.$message({ message: this.$t('message.submitSuccess'), type: 'warning' })
                    this.$emit('back:reload')
                    this.$emit('quit')
                })
            }
        },
        doneData(data) {  // 详情返回处理
            this.form = {
                totalFee: data.totalFee,
                remark: data.remark,
                id: data.id,
                classId: data.classId,
                writeFee: data.writeFee,
                workFlowId: data.workFlowId,
                udgPtClassFundDetailDto: data.udgPtClassFundDetailDto,
                udgPtCourseInfoT: data.udgPtCourseInfoT,
                udgPtClassFundsInfoDetailTs: []
            }
            this.options.name.forEach(item => {
                let jsons = {}
                let flag = true
                if (data.udgPtClassFundsInfoDetailTs && data.udgPtClassFundsInfoDetailTs.length > 0) {
                    data.udgPtClassFundsInfoDetailTs.forEach(item1 => {
                        if (item.value === item1.itemCode) {
                            jsons = {
                                id: item1.id,
                                fundId: item1.fundId,
                                itemName: item.label,
                                itemCode: item.value,
                                itemValue: item1.itemValue,
                                itemDesc: item1.itemDesc
                            }
                            flag = false
                            return
                        }
                        if (flag) {
                            jsons = {
                                itemName: item.label,
                                itemCode: item.value,
                                itemValue: '',
                                itemDesc: ''
                            }
                        }
                    })
                } else {
                    jsons = {
                        itemName: item.label,
                        itemCode: item.value,
                        itemValue: '',
                        itemDesc: ''
                    }
                }
                this.form.udgPtClassFundsInfoDetailTs.push(jsons)
            })
        },
        quit() {
            this.$emit('quit')
        }
    }
}
</script>
<style lang="scss" scoped>
$line: solid #828282 1px;
.funding {
    background-color: #fff;
    padding: 20px;
    &_border {
        height: 20px;
        width: 100%;
        border-right: $line;
        border-left: $line;
    }
    &_borderForm {
        border-bottom: $line;
    }
    &_bg {
        background-color: #f0f0f0;
    }
    &_row {
        display: flex;
        align-items: stretch;
    }
    &_col {
        display: flex;
        align-items: stretch;
        &_div1 {
            width: 140px;
            padding: 5px 5px;
            border: $line;
            border-bottom: none;
            display: flex;
            align-items: center;
            span {
                flex: auto;
                text-align: right;
                line-height: 20px;
            }
        }
        &_div {
            flex: 5;
            padding: 5px 5px;
            border-right: $line;
            border-top: $line;
            text-align: center;
            line-height: 20px;
        }
        &_span {
            margin: auto;
        }
        &_he {
            display: flex;
            border-top: $line;
            border-right: $line;
            flex: auto;
        }
        &_money {
            display: flex;
            border: $line;
            border-bottom: none;
            border-left: none;
            flex: auto;
            align-items: center;
            span {
                text-align: right;
                flex: auto;
            }
        }
    }
    &_item {
        margin: 0;
    }
    &_btleft {
        border: $line;
        border-bottom: none;
        padding: 10px;
        flex: auto;
    }
    &_btright {
        border: $line;
        border-left: none;
        border-bottom: none;
        flex: auto;
        padding: 10px;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
    }
    &_footer {
        display: flex;
        flex-direction: row-reverse;
        padding: 20px;
        border-top: solid #ccc 1px;
        background-color: #fff;
        .funding_submit {
            margin-left: 10px;
        }
    }
    &_tables {
        ::v-deep .el-form-item__error {
            display: none;
        }
    }
}
</style>
